<template>
  <div class="orders-container container">
    <div class="page-title">
      <h2>我的订单</h2>
    </div>
    
    <!-- 搜索区域 -->
    <div class="search-area">
      <el-form :inline="true" :model="queryParams" class="search-form">
        <el-form-item label="订单状态">
          <el-select v-model="queryParams.status" placeholder="全部" clearable>
            <el-option label="全部" value=""></el-option>
            <el-option label="待支付" :value="1"></el-option>
            <el-option label="已支付" :value="2"></el-option>
            <el-option label="已取消" :value="3"></el-option>
            <el-option label="已完成" :value="4"></el-option>
            <el-option label="已取车" :value="5"></el-option>
            <el-option label="已还车" :value="6"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="订单编号">
          <el-input v-model="queryParams.orderNo" placeholder="请输入订单编号" clearable></el-input>
        </el-form-item>
        <el-form-item label="时间范围">
          <el-date-picker
            v-model="dateRange"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            value-format="yyyy-MM-dd"
            @change="handleDateRangeChange">
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleQuery" icon="el-icon-search">搜索</el-button>
          <el-button @click="resetQuery" icon="el-icon-refresh">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    
    <!-- 订单列表 -->
    <div class="order-list">
      <el-table
        v-loading="loading"
        :data="orderList"
        border
        stripe
        style="width: 100%">
        <el-table-column prop="orderNo" label="订单编号" width="180"></el-table-column>
        <el-table-column prop="vehicleName" label="车辆名称" width="180"></el-table-column>
        <el-table-column label="下单时间" width="180">
          <template slot-scope="scope">
            {{ formatDateTime(scope.row.orderTime) }}
          </template>
        </el-table-column>
        <el-table-column label="金额" width="100">
          <template slot-scope="scope">
            <span class="price">¥{{ scope.row.amount }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="statusName" label="状态" width="100">
          <template slot-scope="scope">
            <el-tag :type="getStatusType(scope.row.status)">{{ scope.row.statusName }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="viewOrderDetail(scope.row.orderNo)">查看详情</el-button>
            <el-button v-if="scope.row.status === 1" type="text" size="small" @click="handlePay(scope.row)">去支付</el-button>
            <el-button v-if="scope.row.status === 1" type="text" size="small" @click="handleCancel(scope.row.orderNo)">取消订单</el-button>
          </template>
        </el-table-column>
      </el-table>
      
      <!-- 分页 -->
      <div class="pagination-container">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="queryParams.pageNum"
          :page-sizes="[10, 20, 50, 100]"
          :page-size="queryParams.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
        </el-pagination>
      </div>
    </div>
    
    <!-- 支付对话框 -->
    <el-dialog title="订单支付" :visible.sync="payDialogVisible" width="400px">
      <div class="pay-dialog">
        <div class="order-info">
          <p>订单编号：{{ currentOrder.orderNo }}</p>
          <p>车辆名称：{{ currentOrder.vehicleName }}</p>
          <p class="pay-amount">支付金额：<span>¥{{ currentOrder.amount }}</span></p>
        </div>
        <div class="pay-method">
          <p>请选择支付方式：</p>
          <el-radio-group v-model="payMethod">
            <el-radio :label="1">支付宝</el-radio>
            <el-radio :label="2">微信</el-radio>
            <el-radio :label="3">银行卡</el-radio>
          </el-radio-group>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="payDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="confirmPay" :loading="payLoading">确认支付</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { getMyOrders, cancelOrder, payOrder } from '@/api/order'

export default {
  name: 'UserOrders',
  data() {
    return {
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        orderNo: '',
        status: '',
        startTime: '',
        endTime: ''
      },
      // 日期范围
      dateRange: [],
      // 订单列表
      orderList: [],
      // 总记录数
      total: 0,
      // 加载状态
      loading: false,
      // 支付对话框
      payDialogVisible: false,
      // 当前操作的订单
      currentOrder: {},
      // 支付方式
      payMethod: 1,
      // 支付加载状态
      payLoading: false
    }
  },
  created() {
    this.getOrderList()
  },
  methods: {
    // 获取订单列表
    getOrderList() {
      this.loading = true
      getMyOrders(this.queryParams)
        .then(response => {
          this.orderList = response.data.records
          this.total = response.data.total
        })
        .catch(error => {
          this.$message.error(error.message || '获取订单列表失败')
        })
        .finally(() => {
          this.loading = false
        })
    },
    
    // 搜索
    handleQuery() {
      this.queryParams.pageNum = 1
      this.getOrderList()
    },
    
    // 重置
    resetQuery() {
      this.dateRange = []
      this.queryParams = {
        pageNum: 1,
        pageSize: 10,
        orderNo: '',
        status: '',
        startTime: '',
        endTime: ''
      }
      this.getOrderList()
    },
    
    // 日期范围变化
    handleDateRangeChange(val) {
      if (val) {
        this.queryParams.startTime = val[0] + ' 00:00:00'
        this.queryParams.endTime = val[1] + ' 23:59:59'
      } else {
        this.queryParams.startTime = ''
        this.queryParams.endTime = ''
      }
    },
    
    // 每页条数变化
    handleSizeChange(val) {
      this.queryParams.pageSize = val
      this.getOrderList()
    },
    
    // 当前页变化
    handleCurrentChange(val) {
      this.queryParams.pageNum = val
      this.getOrderList()
    },
    
    // 查看订单详情
    viewOrderDetail(orderNo) {
      this.$router.push(`/order/detail/${orderNo}`)
    },
    
    // 取消订单
    handleCancel(orderNo) {
      this.$confirm('确认取消该订单吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        cancelOrder(orderNo)
          .then(() => {
            this.$message.success('订单取消成功')
            this.getOrderList()
          })
          .catch(error => {
            this.$message.error(error.message || '订单取消失败')
          })
      }).catch(() => {})
    },
    
    // 支付订单
    handlePay(order) {
      this.currentOrder = order
      this.payDialogVisible = true
    },
    
    // 确认支付
    confirmPay() {
      this.payLoading = true
      payOrder({
        orderNo: this.currentOrder.orderNo,
        payType: this.payMethod
      })
        .then(() => {
          this.$message.success('支付成功')
          this.payDialogVisible = false
          this.getOrderList()
        })
        .catch(error => {
          this.$message.error(error.message || '支付失败')
        })
        .finally(() => {
          this.payLoading = false
        })
    },
    
    // 格式化日期时间
    formatDateTime(dateTime) {
      if (!dateTime) return ''
      const date = new Date(dateTime)
      const year = date.getFullYear()
      const month = String(date.getMonth() + 1).padStart(2, '0')
      const day = String(date.getDate()).padStart(2, '0')
      const hour = String(date.getHours()).padStart(2, '0')
      const minute = String(date.getMinutes()).padStart(2, '0')
      const second = String(date.getSeconds()).padStart(2, '0')
      return `${year}-${month}-${day} ${hour}:${minute}:${second}`
    },
    
    // 获取状态对应的类型
    getStatusType(status) {
      switch (status) {
        case 1: return 'warning'  // 待支付
        case 2: return 'success'  // 已支付
        case 3: return 'info'     // 已取消
        case 4: return 'success'  // 已完成
        case 5: return 'primary'  // 已取车
        case 6: return 'success'  // 已还车
        default: return 'info'
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.orders-container {
  padding: 20px 0;
  
  .page-title {
    margin-bottom: 20px;
    
    h2 {
      font-size: 24px;
      font-weight: 500;
      color: #303133;
      margin: 0;
    }
  }
  
  .search-area {
    background: #fff;
    padding: 20px;
    border-radius: 4px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    margin-bottom: 20px;
  }
  
  .order-list {
    background: #fff;
    padding: 20px;
    border-radius: 4px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    
    .price {
      color: #f56c6c;
      font-weight: bold;
    }
  }
  
  .pagination-container {
    margin-top: 20px;
    text-align: right;
  }
  
  .pay-dialog {
    .order-info {
      margin-bottom: 20px;
      
      p {
        margin: 10px 0;
      }
      
      .pay-amount {
        font-weight: bold;
        
        span {
          color: #f56c6c;
          font-size: 18px;
        }
      }
    }
    
    .pay-method {
      p {
        margin-bottom: 10px;
      }
    }
  }
}
</style> 